<template>
	<view>
		<!-- 常用应用 -->
		<view class="m-2 mb-3 bg-white rounded-20">
			<view class="pb-2">
				<view class="boards_title mx-2 pt-4 mt-2 font-md d-flex a-center">
					<text class="font-weight font-33 ml-2">常用应用</text>
				</view>
				<view class="d-flex flex-wrap font mt-2 pr-1">
					<view class="common_content position-relative span-5  text-center py-2 my"
						v-for="(item,index) in common_list" :key="index" @click="goodsTo(item)">
						<view class="box">
							<image class="common_img" :src="item.img" mode="widthFix"></image>
						</view>
						<view class="asd mt-1 text-333 font-27">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 导航条 -->
		<view class="all_nav z-222 bg-white">
			<view class="mx-2">
				<scroll-view scroll-x="true">
					<view class="white-space d-flex">
						<view :id="item.name" :class="nav_index==index?'active_nav':''" class="mr-5 pb-2"
							v-for="(item,index) in nav_list" :key="index" @click="nav_click(item,index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 商品管理 -->
		<view class="bg-f2 py-2">
			<!-- 商品管理 -->
			<view class="mx-2 mb-3 bg-white rounded-20" :id="all_data.goodsList.id">
				<view class="pb-2">
					<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
						<text class="font-weight font-33 ml-2">商品管理</text>
					</view>
					<view class="d-flex flex-wrap font pr-1">
						<view class="common_content span-5  text-center py-2 my"
							v-for="(item,index) in all_data.goodsList.data" :key="index" @click="goodTo(item)">
							<view class="boxx position-relative">
								<image class="common_img" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="asd mt-1 text-333 font-27">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 客户管理 -->
			<view class="mx-2 mb-3 bg-white rounded-20" :id="all_data.clientList.id"
				v-if=" user.kehu_edit || user.kehu_view ">
				<view class="pb-2">
					<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
						<text class="font-weight font-33 ml-2">客户管理</text>
					</view>
					<view class="d-flex flex-wrap font pr-1">
						<view class="common_content span-5  text-center py-2 my"
							v-for="(item,index) in all_data.clientList.data" :key="index" @click="clientTo(item)"
							v-if="(item.name=='新增客户' && user.kehu_edit) || (item.name=='本店客户' && user.kehu_view) || (item.name=='店铺访客' && user.kehu_view) || item.name=='业务员'">
							<view class="boxx position-relative">
								<image class="common_img" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="asd mt-1 text-333 font-27">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单管理 -->
			<view class="mx-2  bg-white rounded-20 mt-2" :id="all_data.orderList.id">
				<view class="pb-2">
					<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
						<text class="font-weight font-33 ml-2">订单管理</text>
					</view>
					<view class="d-flex flex-wrap font pr-1">
						<view class="common_content span-5  text-center py-2 my"
							v-for="(item,index) in all_data.orderList.data" :key="index" @click="orderTo(item)">
							<view class="boxx position-relative">
								<image class="common_img" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="asd mt-1 text-333 font-27">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 虚拟卡商品管理 -->
			<view class="mx-2  bg-white rounded-20 mt-2" :id="all_data.virtual_list.id">
				<view class="pb-2">
					<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
						<text class="font-weight font-33 ml-2">虚拟卡商品管理</text>
					</view>
					<view class="d-flex flex-wrap font pr-1">
						<view class="common_content span-5  text-center py-2 my"
							v-for="(item,index) in all_data.virtual_list.data" :key="index" @click="virtualTo(item)">
							<view class="boxx position-relative">
								<image class="common_img" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="asd mt-1 text-333 font-27">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 促销管理 -->
			<view class="mx-2  bg-white rounded-20 mt-2" :id="all_data.promotion_list.id">
				<view class="pb-2">
					<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
						<text class="font-weight font-33 ml-2">促销</text>
					</view>
					<view class="d-flex flex-wrap font pr-1">
						<view class="common_content span-5  text-center py-2 my"
							v-for="(item,index) in all_data.promotion_list.data" :key="index"
							@click="promotionTo(item)">
							<view class="boxx position-relative">
								<image class="common_img" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="asd mt-1 text-333 font-27">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 店铺数据统计 -->
			<view class="mx-2  bg-white rounded-20 mt-2" :id="all_data.data_list.id">
				<view class="pb-2">
					<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
						<text class="font-weight font-33 ml-2">店铺数据统计</text>
					</view>
					<view class="d-flex flex-wrap font pr-1">
						<view class="common_content span-5  text-center py-2 my"
							v-for="(item,index) in all_data.data_list.data" :key="index" @click="dataTo(item)">
							<view class="boxx position-relative">
								<image class="common_img" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="asd mt-1 text-333 font-27">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 店铺管理 -->
			<view class="mx-2  bg-white rounded-20 mt-2" :id="all_data.shop_list.id">
				<view class="pb-2">
					<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
						<text class="font-weight font-33 ml-2">店铺管理</text>
					</view>
					<view class="d-flex flex-wrap font pr-1">
						<view class="common_content span-5  text-center py-2 my"
							v-for="(item,index) in all_data.shop_list.data" :key="index" @click="shopTo(item)">
							<view class="boxx position-relative">
								<image class="common_img" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="asd mt-1 text-333 font-27">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				common_list: [{
						id: 1,
						name: "添加商品",
						img: "../../static/images/home/add_goods_img.png"
					},
					{
						id: 2,
						name: "在售商品",
						img: "../../static/images/home/sale_goods_img.png"
					},
					{
						id: 3,
						name: "售罄商品",
						img: "../../static/images/home/sell_goods_img.png"
					},
					{
						id: 4,
						name: "商品分类",
						img: "../../static/images/home/goods_class_img.png"
					},
					{
						id: 5,
						name: "今日订单",
						img: "../../static/images/home/today_order_img.png"
					},
					{
						id: 6,
						name: "待发货订单",
						img: "../../static/images/home/shipments_order_img.png"
					},
					{
						id: 7,
						name: "待付款订单",
						img: "../../static/images/home/payment_order_img.png"
					},
					{
						id: 8,
						name: "待收货订单",
						img: "../../static/images/home/delivery_order_img.png"
					},
					{
						id: 9,
						name: "已完成订单",
						img: "../../static/images/home/fulfill_order_img.png"
					},
					{
						id: 10,
						name: "客户管理",
						img: "../../static/images/home/shop_img.png"
					},
					{
						id: 11,
						name: "用户中心",
						img: "../../static/images/home/user_img.png"
					},
					// {id:13,name:"客服中心",img:"../../static/images/home/user_img.png"},
				],
				nav_list: [{
						id: "goods",
						name: "商品管理"
					},
					{
						id: "client",
						name: "客户管理"
					},
					{
						id: "order",
						name: "订单管理"
					},
					{
						id: "virtual",
						name: "虚拟卡片管理"
					},
					{
						id: "promotion",
						name: "促销商品"
					},
					{
						id: "shop",
						name: "店铺管理"
					}
				],
				nav_index: 0, // 标识符
				all_data: {
					"goodsList": {
						id: "goods",
						data: [{
								name: "添加商品",
								img: "../../static/images/home/add_goods_img.png"
							},
							{
								name: "在售商品",
								img: "../../static/images/home/sale_goods_img.png"
							},
							{
								name: "售罄商品",
								img: "../../static/images/home/sell_goods_img.png"
							},
							{
								name: "商品回收站",
								img: "../../static/images/home/recycle_goods_img.png"
							},
							{
								name: "商品分类",
								img: "../../static/images/home/goods_class_img.png"
							}
						],
					},
					"clientList": {
						id: "client",
						data: [{
								name: "新增客户",
								img: "../../static/images/home/terrace_img.png"
							},
							{
								name: "本店客户",
								img: "../../static/images/home/shop_img.png"
							},
							{
								name: "店铺访客",
								img: "../../static/images/home/visitant_img.png"
							},
							{
								name: "业务员",
								img: "../../static/images/home/visitant_img.png"
							},

						],
					},
					"orderList": {
						id: "order",
						data: [{
								name: "今日订单",
								img: "../../static/images/home/today_order_img.png"
							},
							{
								name: "待发货订单",
								img: "../../static/images/home/shipments_order_img.png"
							},
							{
								name: "待付款订单",
								img: "../../static/images/home/payment_order_img.png"
							},
							{
								name: "待收货订单",
								img: "../../static/images/home/delivery_order_img.png"
							},
							{
								name: "已完成订单",
								img: "../../static/images/home/fulfill_order_img.png"
							},
							{
								name: "已取消订单",
								img: "../../static/images/home/cancel_order_img.png"
							},
						],
					},
					"virtual_list": {
						id: "virtual",
						data: [{
								name: "添加虚拟商品",
								img: "../../static/images/home/today_order_img.png"
							},
							{
								name: "虚拟商品",
								img: "../../static/images/home/virtual-goods.png"
							},
							{
								name: "虚拟订单列表",
								img: "../../static/images/home/shipments_order_img.png"
							}
						]
					},

					"shop_list": {
						id: "shop",
						data: [{
								name: "账户余额",
								img: "../../static/images/home/shop_balance_img.png"
							},
							{
								name: "个人中心",
								img: "../../static/images/home/user_img.png"
							},
						]
					},
					"data_list": {
						id: "data",
						data: [{
								name: "现金余额",
								img: "../../static/images/home/shop_balance_img.png"
							},
							{
								name: "应收账款",
								img: "../../static/images/home/user_img.png"
							},
							{
								name: "库存金额",
								img: "../../static/images/home/user_img.png"
							},
							{
								name: "应付金额",
								img: "../../static/images/home/user_img.png"
							},
							{
								name: "销售毛利",
								img: "../../static/images/home/user_img.png"
							},
							{
								name: "资产负债表",
								img: "../../static/images/home/user_img.png"
							},
							{
								name: "利润表",
								img: "../../static/images/home/user_img.png"
							},
						]
					},
					"promotion_list": {
						id: "promotion",
						data: [{
								name: "促销商品",
								img: "../../static/images/home/promotion_order_img.png"
							},
							{
								name: "现金减免",
								img: "../../static/images/promotion/cash-remission.png"
							}
						]
					}
				},
				scrollTop: "",
				goods_Top: 0,
				client_Top: 0,
				order_Top: 0,
				virtual_Top: 0,
				shop_Top: 0,
				promotion_Top: 0,
				user: {}
			}
		},

		methods: {
			// 全部应用
			goodsTo(item) {
				if (item.id == 1) {
					uni.navigateTo({
						url: "/pages/goods-add/goods-add"
					})
				} else if (item.id == 2) {
					uni.navigateTo({
						url: "/pages/goods-sale/goods-sale"
					})
				} else if (item.id == 3) {
					uni.navigateTo({
						url: "/pages/goods-sell/goods-sell"
					})
				} else if (item.id == 4) {
					uni.navigateTo({
						url: "/pages/goods-class/goods-class"
					})
				} else if (item.id == 5) {
					uni.navigateTo({
						url: "/pagesA/order/order-today"
					})
				} else if (item.id == 6) {
					uni.navigateTo({
						url: '/pagesA/order/order-today-send'
					})
				} else if (item.id == 7) {
					uni.navigateTo({
						url: '/pagesA/order/order-payment'
					})
				} else if (item.id == 8) {
					uni.navigateTo({
						url: "/pagesA/order/order-take"
					})
				} else if (item.id == 9) {
					uni.navigateTo({
						url: "/pagesA/order/order-fulfilled"
					})
				} else if (item.id == 10) {
					uni.navigateTo({
						url: '/pagesB/client/shops'
					})
				} else if (item.id == 11) {
					uni.navigateTo({
						url: '/pagesA/user/user'
					})
				} else if (item.id == 12) {
					uni.navigateTo({
						url: "/pagesA/all-function/all-function"
					})
				} else if (item.id == 13) {
					uni.navigateTo({
						url: "/pagesA/kefu/list"
					})
				}
			},
			// 商品管理
			goodTo(item) {
				if (item.name == "添加商品") {
					uni.navigateTo({
						url: "/pages/goods-add/goods-add"
					})
				} else if (item.name == "在售商品") {
					uni.navigateTo({
						url: "/pages/goods-sale/goods-sale"
					})
				} else if (item.name == "售罄商品") {
					uni.navigateTo({
						url: "/pages/goods-sell/goods-sell"
					})
				} else if (item.name == "商品回收站") {
					uni.navigateTo({
						url: "/pages/goods-recycle/goods-recycle"
					})
				} else if (item.name == "商品分类") {
					uni.navigateTo({
						url: '/pages/goods-class/goods-class'
					})
				}
			},
			// 客户管理
			clientTo(item) {
				if (item.name == "新增客户") {
					uni.navigateTo({
						url: '/pagesB/client/terrace'
					})
				} else if (item.name == "本店客户") {
					uni.navigateTo({
						url: "/pagesB/client/shops"
					})
				} else if (item.name == "店铺访客") {
					uni.navigateTo({
						url: "/pagesB/client/shops-visitor"
					})
				} else if (item.name == "业务员") {
					uni.navigateTo({
						url: "/pagesB/yewu/list"
					})
				}
			},
			// 订单管理
			orderTo(item) {
				if (item.name == '今日订单') {
					uni.navigateTo({
						url: "/pagesA/order/order-today"
					})
				} else if (item.name == '待发货订单') {
					uni.navigateTo({
						url: '/pagesA/order/order-today-send'
					})
				} else if (item.name == '待付款订单') {
					uni.navigateTo({
						url: '/pagesA/order/order-payment'
					})
				} else if (item.name == '待收货订单') {
					uni.navigateTo({
						url: "/pagesA/order/order-take"
					})
				} else if (item.name == '已完成订单') {
					uni.navigateTo({
						url: "/pagesA/order/order-fulfilled"
					})
				} else if (item.name == '已取消订单') {
					uni.navigateTo({
						url: "/pagesA/order/order-closed"
					})
				}
			},
			// 添加虚拟商品
			virtualTo(item) {
				if (item.name == "添加虚拟商品") {
					uni.navigateTo({
						url: "/pagesA/virtual/virtual-add"
					})
				} else if (item.name == "虚拟商品") {
					uni.navigateTo({
						url: "/pagesA/virtual/virtual-sale"
					})
				} else if (item.name == '虚拟订单列表') {
					uni.navigateTo({
						url: '/pagesA/virtual/virtual-order'
					})
				}
			},
			// 促销
			promotionTo(item) {
				if (item.name == "促销商品") {
					uni.navigateTo({
						url: "/pagesA/promotion/promotion"
					})
				} else if (item.name == "现金减免") {
					uni.navigateTo({
						url: "/pagesA/cash/cash-remission"
					})
				}
			},
			// 店铺管理
			shopTo(item) {
				if (item.name == "账户余额") {
					uni.navigateTo({
						url: "/pagesA/store/store-balance"
					})
				} else if (item.name == "个人中心") {
					uni.navigateTo({
						url: "/pagesA/user/user"
					})
				}
			},
			// 店铺数据统计
			dataTo(item) {
				if (item.name == "现金余额") {
					uni.navigateTo({
						url: "/pagesC/dianpu_data/xinjin_yue"
					})
				} else if (item.name == "应收账款") {
					uni.navigateTo({
						url: "/pagesC/yingshou_zhangkuan/zhangkuan"
					})
				} else if (item.name == "库存金额") {
					uni.navigateTo({
						url: "/pagesC/kucun_price/kunCunPrice"
					})
				} else if (item.name == "应付金额") {
					uni.navigateTo({
						url: "/pagesC/dianpu_data/yingfu_jin_e"
					})
				} else if (item.name == "销售毛利") {
					uni.navigateTo({
						url: "/pagesC/xiaoshou_maoli/maoli"
					})
				} else if (item.name == "资产负债表") {
					uni.navigateTo({
						url: "/pagesC/fuzhaibiao/zichan?name=" + item.name
					})
				} else if (item.name == "利润表") {
					uni.navigateTo({
						url: "/pagesC/fuzhaibiao/zichan?name=" + item.name
					})
				}

			},
			nav_click(item, index) {
				this.nav_index = index
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				uni.createSelectorQuery().select("#" + item.id).boundingClientRect(function(res) {
					console.log("标签获取====>", res.top)
					this.scrollTop = res.top - 43
					uni.pageScrollTo({
						scrollTop: res.top - 43,
						duration: 0
					});
				}).exec()
			}
		},
		onShow() {
			let that = this
			if (uni.getStorageSync("toggle_default")) {
				that.user = uni.getStorageSync("users") || {}
			} else if (uni.getStorageSync("toggle_demo")) {
				that.user = uni.getStorageSync("users_demo") || {}
			} else {
				that.user = uni.getStorageSync("users") || {}
			}
		},
		onLoad() {
			let that = this
			uni.createSelectorQuery().select("#" + that.all_data.goodsList.id).boundingClientRect(function(res) {
				that.goods_Top = res.top - 100
			}).exec()
			uni.createSelectorQuery().select("#" + that.all_data.clientList.id).boundingClientRect(function(res) {
				that.client_Top = res.top - 100
			}).exec()
			uni.createSelectorQuery().select("#" + that.all_data.orderList.id).boundingClientRect(function(res) {
				that.order_Top = res.top - 100
			}).exec()
			uni.createSelectorQuery().select("#" + that.all_data.virtual_list.id).boundingClientRect(function(res) {
				that.virtual_Top = res.top - 50
			}).exec()
			uni.createSelectorQuery().select("#" + that.all_data.shop_list.id).boundingClientRect(function(res) {
				that.shop_Top = res.top - 50
			}).exec()
			uni.createSelectorQuery().select("#" + that.all_data.promotion_list.id).boundingClientRect(function(res) {
				that.promotion_Top = res.top
			}).exec()
		},
		onPageScroll(e) {
			if (e.scrollTop >= this.client_Top && e.scrollTop <= this.order_Top) {
				this.nav_index = 1
			} else if (e.scrollTop >= this.order_Top && e.scrollTop <= this.virtual_Top) {
				this.nav_index = 2
			} else {
				this.nav_index = 0
			}
		},
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.active_nav {
		border-bottom: 8upx solid #f53927;
		font-weight: bold;
	}

	.all_nav {
		position: sticky;
		top: 0;
		height: 80upx;
	}

	.box_add {
		width: 110upx;
		height: 110upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: #F2F2F2;
		border: 1px dashed #B2B2B2;
	}
</style>